<script lang="ts" setup>
import diceCom from '@/components/diceCom.vue'
import Taro, { useDidHide, useDidShow } from '@tarojs/taro'
import { ref } from 'vue'

const diceNum = ref(5)
const randomList = ref([1, 2, 3, 4, 5])
// 摇
const shakeDice = () => {
    if (isLock.value || isShakeDiceBox.value) {
        return
    }
    resetDiceBox()
    shakeDiceBox()
    randomList.value = []
    for (let index = 1; index <= diceNum.value; index++) {
        randomList.value.push(Math.floor(Math.random() * 6))
    }
}
// 锁定
const isLock = ref(false)
const lockDice = () => {
    isLock.value = !isLock.value
}
// 骰子布局配置
const gridColConfig = (random: number) => {
    return {
        1: 'col-start-2 col-end-3',
        2: 'col-start-4 col-end-5',
        3: 'col-start-1 col-end-2',
        4: 'col-start-5 col-end-6',
        5: 'col-start-3 col-end-4'
    }[random]
}

useDidHide(() => {
    Taro.offAccelerometerChange(() => {})
})
useDidShow(() => {
    // 监听加速度【摇一摇】
    Taro.onAccelerometerChange((res) => {
        // 摇晃灵敏度：可拓展 低1 中1.5 高2
        if (res.x >= 1.5 || res.y >= 1.5 || res.z >= 1.5) {
            Taro.vibrateLong({
                success: () => {
                    shakeDice()
                }
            })
        }
    })
})

const transformYStyle = ref({})
const translateY = ref(0)
const baseY = ref(0)
const startY = ref(0)
const diceBox = ref<HTMLElement | null>(null)
// 滑动开始
const handleTouchStart = async (event: any) => {
    baseY.value = translateY.value
    startY.value = event.touches[0].clientY
}
// 滑动中
const handleTouchMove = async (event: any) => {
    if (isShakeDiceBox.value) {
        return
    }
    const currentY = event.touches[0].clientY
    translateY.value = baseY.value + (currentY - startY.value) * 4

    if (translateY.value >= -10) {
        translateY.value = 0
    }

    if (translateY.value <= -500) {
        translateY.value = -500
    }

    transformYStyle.value = {
        // transform: `translateY(${translateY.value}px)`
        bottom: `${-translateY.value}rpx`
    }
}

//
const resetDiceBox = () => {
    translateY.value = 0
    transformYStyle.value = {
        bottom: `${-translateY.value}rpx`
    }
}

const isShakeDiceBox = ref(false)
const shakeDiceBox = () => {
    isShakeDiceBox.value = true
    setTimeout(() => {
        isShakeDiceBox.value = false
    }, 1000)
}
</script>

<template>
    <div
        class="pt-10 pb-20 w-screen h-48 bg-slate-300 flex flex-col justify-evenly items-center text-2xl text-slate-800 font-bold"
    >
        快乐摇骰子
    </div>
    <div class="w-screen relative">
        <div class="m-20 box-border grid grid-cols-5 grid-rows-3">
            <diceCom
                v-for="random in [1, 2, 3, 4, 5]"
                :random="randomList[random - 1]"
                :key="random"
                :class="gridColConfig(random)"
            ></diceCom>
        </div>
        <div
            class="w-screen absolute bottom-0 left-0"
            :style="transformYStyle"
            :class="[isShakeDiceBox ? 'shake' : '']"
        >
            <div ref="diceBox" @touchmove="handleTouchMove" @touchstart="handleTouchStart">
                <img
                    src="https://cdn.krisli.cn/imgs/Group%203.png"
                    mode="widthFix"
                    class="mx-auto h-full"
                />

                <div class="absolute shake-icon flex flex-col justify-center items-center">
                    <img src="https://cdn.krisli.cn/imgs/shake.png" class="block w-20 h-20" />
                    <div
                        class="pt-4 w-screen flex flex-col justify-evenly items-center text-2xl text-slate-500 font-bold"
                    >
                        摇一摇
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="flex justify-center">
        <nut-button v-if="!isLock" type="primary" @click="shakeDice">摇骰子</nut-button>
    </div>
    <div class="pt-4 flex justify-center">
        <nut-button @click="lockDice">{{ isLock ? '解锁骰子' : '锁定骰子' }}</nut-button>
    </div>
</template>

<style lang="less">
.shake-icon {
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    transform: translate(-50%, -50%);
}

.shake {
    animation: shake 0.3s linear infinite;
}

@keyframes shake {
    0% {
        transform: rotateZ(0deg);
    }
    25% {
        transform: rotateZ(-15deg);
    }
    50% {
        transform: rotateZ(0deg);
    }
    75% {
        transform: rotateZ(15deg);
    }
    100% {
        transform: rotateZ(0deg);
    }
}
</style>
